<template>
  <div class="lunbo2">
    <div class="lunbo2_list">
      <div class="lunbo2_wrapper">
        <div 
        class="lunbo2_items" 
        v-for="(lunbo2, index) in lunbo2s" 
        :key="index"
         :style="{left: left}"
        >
          <img :src="lunbo2.img1"  />
          <img :src="lunbo2.img2"  />
          <img :src="lunbo2.img3"  style="margin: 0;" />
        </div>
      </div>
    </div>
    <div class="lunbo2-btn">
      <div class="next1" @click="gotoPage(nextIndex)">
        <img src="../images/right-icon.png" alt style="width: 34px;" />
      </div>
      <div class="prev1" @click="gotoPage(prevIndex)">
        <img src="../images/left-icon.png" alt style="width: 34px;" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        lunbo2s:[
          {
            img1: require("../images/0ff15f1294157dbb.jpg.webp.jpg"),
            img2: require("../images/6ce5538ca935a348.jpg.webp.jpg"),
            img3: require("../images/6f638214a53b41ef.jpg.webp.jpg"),
          },
          {
            img1: require("../images/07b9b7eccfcacf8c.jpg.webp.jpg"),
            img2: require("../images/79fddbbb2bfb164d.png.webp.jpg"),
            img3: require("../images/988cb3c0958fdef8.jpg.webp.jpg"),
          },
          {
            img1: require("../images/357557ff2e30f423.png.webp.jpg"),
            img2: require("../images/e74960f9cfcf2fc6.jpg.webp.jpg"),
            img3: require("../images/e1577408a3308726.png.webp.jpg"),
          }
        ],
        currentIndex: 0,
        left: '0px'
      }
    },
    computed:{
      prevIndex(){
        if(this.currentIndex == 0) {
          return this.lunbo2s.length - 1;
        }else{
          return this.currentIndex - 1;
        }
      },
      nextIndex(){
        if(this.currentIndex == this.lunbo2s.length - 1) {
          return 0;
        }else {
          return this.currentIndex + 1;
        }
      }
    },
    methods:{
      gotoPage(index){
        this.currentIndex = index
        this.left =  -(index * 190)+'px'

        // console.log(this.lunbo2s.length)
      }
    }
}
</script>

<style lang="stylus" scoped>
.lunbo2{
    margin-left: 20px;
    float: left;
    width: 190px;
    height: 470px;
}
.lunbo2-btn{
    width: 190px;
    position: absolute;
    top: 373px;
}
.lunbo2_list{
    width: 190px;
    overflow: hidden;
}
.lunbo2_wrapper{
    position: relative;
    width: 570px;
    
}
.lunbo2_items{
    position: relative;
    left: 0;
    float: left;
    width: 190px;
}

.lunbo2_items img{
    display: block;
    width: 190px;
    margin-bottom: 10px;
}
.next1 {
    float: right;
    opacity: 0;
}
.next1:hover{
    opacity: 1;
}
.prev1 {
    float: left;
    opacity: 0;
}
.prev1:hover{
    opacity: 1;
}
</style>